<!DOCTYPE html>
<html>
    <head>
        <title>Forum</title>
        <% include ./common/link %>
    </head>
    <body>
        <% include ./common/header%>
        
        <div class="container" style="margin-top:5%;margin-bottom:70px">
            <!--forum topic list-->
            <div class="col-md-8">
                <div class="panel panel-default">
                    <div class="panel-heading"> <!--title-->
                        <ul class="nav nav-pills">
                            <li role="presentation" class="<%=(topicCate == 'all' ? 'active' : '')%>"><a href="/forum?cate=all&page=1">All</a></li>
                            <li role="presentation" class="<%=(topicCate == 'elite' ? 'active' : '')%>"><a href="/forum?cate=elite&page=1">Elite</a></li>
                            <!--categories-->
                            <%if(cateData.length>0){%>
                                <%cateData.forEach(function(cate,index){%>
                                    <li role="presentation" class="<%=(topicCate == cate._id ? 'active' : '')%>">
                                        <a href="/forum?cate=<%=cate._id%>&page=1"><%=cate.catename%></a>
                                    </li>
                                <%})%>
                            <%}%>
                        </ul>
                    </div>
                    <div class="list-group">
                        <!--每一条话题标题-->
                        <%topicList.forEach(function(tpc,index){%>
                            <a href="/topics/<%=tpc._id%>" class="list-group-item"><img src="<%=(tpc.poster.avatar? tpc.poster.avatar : '/images/avatar.png' )%>" style="width:30px;height:30px"> 
                                <%if(tpc.isTop){%>
                                    <img src='/images/top.png'style="widht:20px;height:20px"/>
                                <%}%>
                                <%if(tpc.isElite){%>
                                    <span style="color:red">[Elite]</span>
                                <%}%>
                                [<%=tpc.topicType.catename%>] <%=tpc.title%>
                                
                                <span style="float:right"><%=countTimeAgo(tpc.createTime)%></span> 
                                <span style="float:center">(<%=tpc.reply.length%>/<%=tpc.viewCount%>)</span>
                            </a>
                        <%});%>
                        <!--page buttons-->
                        <a class="list-group-item">
                            <div class="btn-group" role="group" aria-label="...">
                                <button type="button" class="btn btn-default" <%=(parseInt(currentPage) === 1 ? 'disabled' : '')%> onclick="jump(1)"><<</button>
                                <%
                                    var i=0,end=0;
                                    if((currentPage-2)<=0){
                                        i=1;
                                    }else{
                                        i=(currentPage-2);
                                    }

                                    if(pagesAmount>(parseInt(currentPage)+2)){
                                        if(pagesAmount <5){
                                            end = pagesAmount;
                                        }else{
                                            end = parseInt(currentPage)+2;
                                        }
                                    }else{
                                        end=pagesAmount;
                                    }
                                %>
                                <%if((currentPage-2)>1){%>
                                    <button type="button" class="btn btn-default" >...</button>
                                <%}%>
                                <%for(i;i<=end;i++){%>
                                    <button type="button" class="btn btn-default <%=(parseInt(currentPage) === i ? 'active' : '')%>" onclick="jump(<%=i%>)"><%=i%></button>
                                <%}%>
                                <%if(pagesAmount>parseInt(currentPage)+2){%>
                                    <button type="button" class="btn btn-default" >...</button>
                                <%}%>

                                <button type="button" class="btn btn-default" <%=(parseInt(currentPage) === parseInt(pagesAmount) ? 'disabled' : '')%> onclick="jump(<%=pagesAmount%>)">>></button>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <!--user info area-->
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        You
                    </div>
                    <div class="panel-body">
                        <%if(user){%>
                            <img src="<%= (user.avatar ? user.avatar : '/images/avatar.png') %>" style="width:60px;height:60px" title="his"/>
                            <%= user.username %></p>
                            Score: <%= user.score %></p>
                            “
                            <%= user.mark ? user.mark :'This guy is lazy and wrote nothing.' %>
                            ”
                        <%}else{%>
                            You haven't logged in.</p>
                            <a href="/login" class="btn btn-primary">Login</a>
                        <%}%>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Topics without replies
                    </div>
                    <div class="panel-body">
                        <%noReplyTopics.forEach(function(tpc,index){%>
                            <a href="/topics/<%=tpc._id%>"><%=tpc.title%></a></p>
                        <%})%>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Score table top 5
                    </div>
                    <div class="panel-body">
                        <%score.forEach(function(user,index){%>
                            [<%=user.score%>] <a href="/topics/<%=user._id%>"><%=user.username%></a></p>
                        <%})%>
                    </div>
                </div>
            </div>
        </div>
        <% include ./common/footer%>
        <script>
            function jump(page){
                window.location.href = "/forum?cate=<%=topicCate%>&page="+page;
            }
        </script>
    </body>
</html>